<!DOCTYPE html>
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <meta charset="utf-8">
    <title>购物车</title>
    <style>
        th,tr{
            text-align: center;
        }
    </style>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1" class="table">
        <th>

            <input type="checkbox" class="che">

        </th>
        <th>Id</th>
        <th>名称</th>
        <th>图片</th>
        <th>金额</th>
        <th>介绍</th>
        <tr v-for="item in info">
            <td>
                <input type="checkbox" class="cl">
            </td>
            <td> {{ item.id }}</td>
            <td>{{ item.goods_name }}</td>
            <td>

                <img :src="item.goods_img" width="100px" height="100px">
            </td>
            <td>{{ item.goods_price }}</td>
            <td>{{item.goods_desc}}</td>


        </tr>
    </table>


</div>
<button type="button" class="btn btn-danger">去支付</button>
<script type = "text/javascript">
    new Vue({
        el: '#app',
        data () {
            return {
                info: null
            }
        },
        mounted () {
            axios
                .get('http://www.eduction.com/api/Cart?user_id=1')
                .then(res=>{
                    this.info=res.data.data
                    console.log(this.info)

                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })
</script>
</body>
</html>
<script src="../jquery-3.3.1.min.js"></script>
<script>
    $('.che').click(function (){
        //获取全选的选中状态 checked属性
        var status = $(this).prop('checked');
        //江梅一行的checkbox状态 和全选设置成一样的
        $('.cl').prop('checked', status);

    })
</script>
